@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;

@include b(chat-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
  margin-bottom: 20px;

  @include e(left) {
    @include m(name) {
      font-size: 16px;
      font-weight: 500;
    }
  }

  @include e(status) {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 6px;

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;

      @include is(online) {
        background-color: cssVarEl(color-success);
      }

      @include is(offline) {
        background-color: cssVarEl(color-danger);
      }
    }

    .text {
      font-size: 12px;
      color: #888888;
    }
  }

  @include e(right) {
    display: flex;
    gap: 8px;
    align-items: center;

    .btn {
      width: 42px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      cursor: pointer;
      border-radius: 50%;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: #f5f5f5;
      }

      i {
        font-size: 20px;
        color: #666666;
      }
    }
  }
}
